<template>
  <div class="h-full w-full">
    <Top></Top>
    <a-layout class="px-[8px] pt-[10px]">
      <Mnues v-model="selectedMenu" :list="list"></Mnues>
      <a-layout-content class="mt-[10px] bg-[#fff] p-[20px]">
        <List v-if="selectedMenu == 1" />
        <Book v-else-if="selectedMenu == 2" />
        <Send v-else-if="selectedMenu == 3" />
        <monitoringProject  v-else-if="selectedMenu == 5" />
        <enterpriseProject  v-else-if="selectedMenu == 6" />
        <ownerProject  v-else-if="selectedMenu == 7" />
        <Collect v-else-if="selectedMenu == 8" />
        <Client v-else-if="selectedMenu == 9" />
        
        <record v-else-if="selectedMenu == 14" />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import Top from "@/components/workHearder/index.vue";
import AssetOne from "@/assets/img/work/b-1.png";
import AssetTwo from "@/assets/img/work/b-2.png";
import AssetThree from "@/assets/img/work/b-3.png";
import AssetFour from "@/assets/img/work/b-4.png";
import Assetfive from "@/assets/img/组 6245@2x.png";
import Assetsix from "@/assets/img/组 6246@2x.png";
import Assetseven from "@/assets/img/组 6248@2x.png";
import Asseteight from "@/assets/img/组 6247@2x.png";
import Assetnine from "@/assets/img/组 6250@2x.png";
import Asseteleven from "@/assets/img/组 6255@2x.png";
import Assettwelve from "@/assets/img/组 6256@2x.png";
import Assetthirteen from "@/assets/img/组 6257@2x.png";
import Assetthirteens from "@/assets/img/组 6258@2x.png";
import recordImg from "@/assets/img/组 7212@2x.png";

import Mnues from "@/components/menus/index.vue";

import List from './list/index.vue'
import Book from './book/index.vue'
import Send from './movement/index.vue'
import Collect from './collect/index.vue'
import record from './record/index.vue'
import monitoringProject from './monitoringProject/index.vue'
import enterpriseProject from './enterpriseProject/index.vue'
import ownerProject from './enterpriseProject/index.vue'
import Client from './Client/index.vue'




const list = [
  {
    key: 1,
    name: "订阅列表",
    img: AssetOne,
  },
  {
    key: 2,
    name: "订阅设置",
    img: AssetTwo,
  },
  {
    key: 3,
    name: "推送设置",
    img: AssetThree,
  },
  {
    key: 4,
    name: "搜索",
    img: Assetfive,
  },
  {
    key: 5,
    name: "项目进度监控",
    img: Assetsix,
  },
  {
    key: 6,
    name: "企业情报监控",
    img: Assetseven,
  },
  {
    key: 7,
    name: "业主监控",
    img: Asseteight,
  },
  {
    key: 8,
    name: "收藏列表",
    img: AssetFour,
  },
  {
    key: 9,
    name: "我的客户",
    img: Assetnine,
  },
  {
    key: 10,
    name: "潜在项目预测",
    img: Asseteleven,
  },
  {
    key: 11,
    name: "潜在客户挖掘",
    img: Assettwelve,
  },
  {
    key: 12,
    name: "潜在竞争对手",
    img: Assetthirteen,
  },
  {
    key: 13,
    name: "合作伙伴挖掘",
    img: Assetthirteens,
  },
  {
    key: 14,
    name: "处理记录",
    img: recordImg,
  },
  
];

const selectedMenu = ref(1);
</script>

<style lang="scss" scoped>
:deep(.justify-items-center) {
  padding-left:8px !important;
  padding-right:8px !important;
  // margin: 0 !important;
}
</style>
